<template>
    <div class="user">
        <div style="height: 80px">
            <div>
                <el-autocomplete style="margin-top: 20px;margin-left: -1040px"
                                 class="inline-input"
                                 v-model="select"
                                 hide-loading=true
                                 placeholder="请输入名称关键字">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-autocomplete> <el-button  @click="getSelect()" icon="el-icon-search" circle></el-button>
            </div>
            <div style="height:40px;margin-top: -40px">
                <el-button style="margin-right: -1000px;" @click="addUser()" type="primary" round>生成用户</el-button>
            </div>
        </div>
        <el-table :data="pagination.records" border :header-cell-style="{background : 'rgba(72,121,129,0.38)'}">
            <el-table-column align="center" fixed="left" prop="userName" label="用户名" width="180"></el-table-column>
            <el-table-column align="center" prop="userNickname" label="昵称" width="100"></el-table-column>
            <el-table-column align="center" prop="userRealname" label="姓名" width="80"></el-table-column>
            <el-table-column align="center"  label="密码" width="120">******************</el-table-column>
            <el-table-column align="center" prop="userGender" label="性别" width="80"></el-table-column>
            <el-table-column align="center" prop="userBirthday" label="出生日期" width="230"></el-table-column>
            <el-table-column align="center" prop="userHomeplace.addressName" label="籍贯" width="200"></el-table-column>
            <!--要进行的操作-->
            <el-table-column fixed="right" label="操作" width="220">
                <template slot-scope="scope">
                    <el-button @click="view(scope.row)" type="info" icon="el-icon-view" size="small"
                               round></el-button><!--详情查看-->
                    <el-button @click="edit(scope.row)" type="info" icon="el-icon-edit" size="small"
                               round></el-button><!--详情查看-->
                    <el-button @click="deleteRecord(scope.row.userId)" type="danger" icon="el-icon-delete"
                               size="small" round></el-button><!--删除-->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.current"
                :page-sizes="[7, 10, 15, 20]"
                :page-size="pagination.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total" class="page">
        </el-pagination>
        <!-- 编辑对话框-->
        <!--<el-dialog
                title="编辑用户信息"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">      &lt;!&ndash;提交修改后的用户信息，一般系统里用户信息属于隐私，所以这里不做修改功能&ndash;&gt;
            <section class="update">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="form.userNickname"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="form.userRealname"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-input v-model="form.userGender"></el-input>
                    </el-form-item>
                    <el-form-item label="出生日期">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.userBirthday" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="籍贯">
                        <el-input v-model="form.userHomeplace.addressName"></el-input>
                    </el-form-item>
                </el-form>
            </section>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
        </el-dialog>-->
    </div>
</template>

<script>
    export default {
        name: 'User',
        data() {
            return {
                select: '',
                /*form: {
                    userAddress:{},
                    userHomeplace:{}
                }, //保存点击以后当前产品的信息*/
                pagination: { //分页后的产品信息
                    current: 1, //当前页
                    total: null, //记录条数
                    size: 7,//每页条数
                    records: []  //当前页面的数据
                },
                //dialogVisible: false  //如果为true就显示编辑框

            }
        },
        created() {
            this.getUserInfo()
        },
        methods: {
            edit(userData) {                             //跳到查询详情页面
              this.$router.push({name:'UserDetail',params:{userData:userData}})
            },
            view(userData) {                             //跳到查询详情页面
              this.$router.push({name:'UserDetail',params:{userData:userData,flag:'view'}})
            },
            getSelect(){
                this.$axios.get(`/api/userByName/${this.select}/${this.pagination.current}/${this.pagination.size}`).then(res =>{
                    if (res.data != null && res.data != ''){
                        this.pagination = res.data
                    }else {
                        this.$confirm('未查找到相关数据','查询提示',{
                            confirmButtonText: '好吧',
                            type : "warning"
                        }).then(() => {
                        })
                    }
                })
            },
            /*submit() { //提交修改后的用户信息，一般系统里用户信息属于隐私，所以这里不做修改功能
                this.dialogVisible = false
                this.$axios({
                    url: '/api/user',
                    method: 'put',
                    data: {
                        ...this.form
                    }
                }).then(res => {
                    if (res.data != null && res.data != "") {
                        this.$message({ //成功修改提示
                            showClose: true,  //设置手动关闭
                            center: true,//内容居中
                            message: '更新成功',
                            type: 'success'
                        })
                    }
                    this.getUserInfo() //更新页面数据！！！！
                }).catch(res => {                           //更新失败
                    console.log("更新报错", res)
                    this.$message({   //弹出错误框
                        showClose: true,
                        type: "error",
                        message: "更新失败！",
                        center: true //内容居中
                    });
                })
            },*/
            deleteRecord(userId) {
                this.$confirm("确定删除该记录吗,该操作不可逆！！！", "删除提示", {
                    confirmButtonText: '确定删除',
                    cancelButtonText: '算了,留着',
                    type: 'danger'
                }).then(() => { //确认删除
                    this.$axios({
                        url: `/api/user/${userId}`,
                        method: 'delete',
                    }).then(res => {                         //删除成功
                        this.getUserInfo()
                        this.$message({   //弹出成功框
                            showClose: true,
                            type: "success",
                            message: "删除成功",
                            center: true //内容居中
                        });
                    }).catch(res => {                           //删除失败
                        console.log("删除报错", res)
                        this.$message({   //弹出错误框
                            showClose: true,
                            type: "error",
                            message: "删除失败！",
                            center: true //内容居中
                        });
                    })
                })
            },
            getUserInfo() { //分页查询所有产品信息
                this.$axios(`/api/user/${this.pagination.current}/${this.pagination.size}`).then(res => {
                    for (let i = 0; i < res.data.records.length; i++) {  //将代表销售状态的数字转化为对应的销售状态文字
                        switch (res.data.records[i].userGender) {
                            case 0 :
                                res.data.records[i].userGender = '男♂';
                                break;
                            case 1 :
                                res.data.records[i].userGender = '女♀';
                                break;
                        }
                    }
                    console.log("user页面返回的对象", res)
                    this.pagination = res.data
                    console.log("返回的user页面数据", this.pagination.records)

                }).catch(error => {
                })
            },
            //改变当前记录条数
            handleSizeChange(val) {
                this.pagination.size = val
                this.getUserInfo()
            },
            //改变当前页码，重新发送请求
            handleCurrentChange(val) {
                this.pagination.current = val
                this.getUserInfo()
            },
        },
    };
</script>
<style lang="scss" scoped>
    .user {                 /*整体表格样式*/
        padding: 0px 40px;
    }

    .page {             /*页码样式*/
        margin-top: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

